<template>
  <tm-app ref="app">
    <!--  #ifndef H5 -->
    <tm-navbar :title="data.title"></tm-navbar>
    <!-- #endif -->
    <tm-tabs
      :list="memberTypeList"
      align="around"
      :default-name="data.tabActive"
      :active-name="data.tabActive"
      activeColor="primary"
      activeFontColor="primary"
      _class="text-weight-b"
      itemModel="line"
      :showTabsLineAni="true"
      :width="750"
      @change="tabChanged"
    >
    </tm-tabs>
    <tm-sheet :margin="[0]" v-if="data.isLoading" class="flex1">
      <tm-skeleton-line :height="50"></tm-skeleton-line>
      <tm-skeleton-line :height="50"></tm-skeleton-line>
      <tm-skeleton-line :height="50"></tm-skeleton-line>
      <tm-skeleton-line :height="50"></tm-skeleton-line>
      <tm-skeleton-line :height="50"></tm-skeleton-line>
      <tm-skeleton-line :height="50"></tm-skeleton-line>
    </tm-sheet>
    <tm-scrolly
      class="from-content"
      v-else
      :_style="'height:100vh'"
      v-model:bottom-value="bottomFresh"
      @bottom="refreshBottom"
    >
      <personList
        :setList="data.listInfo"
        v-if="data.tabActive === 'members' && data.listInfo.length > 0"
        @btnClick="goMenu"
      ></personList>
      <tm-sheet v-else :margin="[0]">
        <tm-result :showBtn="false" subTitle=" " title="暂无数据"></tm-result>
      </tm-sheet>
    </tm-scrolly>
    <!-- <view class="flex flex-row to-bottom" v-if="data.tabActive === 'members'"> -->
    <!-- <view class="flex-1 mr16">
        <tm-button
          form-type="submit"
          icon="tmicon-plus"
          label="添加好友"
          color="#366EF4"
          @click="menuClick"
          block
        ></tm-button>
      </view>
      <view class="flex-1">
        <tm-button
          form-type="submit"
          icon="tmicon-ellipsis-vertical"
          label=""
          outlined
          fontColor="#15181D"
          color="#DCDCDC"
          block
        ></tm-button>
      </view> -->
    <!-- </view> -->
  </tm-app>

  <formModal
    :show="show"
    :className="'center'"
    @close="close"
    :menuInfo="menuInfo!"
  />
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
// #ifdef H5
import { onMounted, getCurrentInstance } from 'vue'
import { useRoute } from 'vue-router'
// #endif
import { reactive, ref } from 'vue'
import { kernel, schema } from '../../../ts/base'
import orgCtrl from '../../../ts/controller'
import { ICompany } from '../../../ts/core/target/team/company'
import { IPerson } from '../../../ts/core/target/person'
import personList from '../../relation/components/personList.vue'
import { memberTypeList } from '../../relation/config/config'
import { InfoPortal } from '../../home/common/portalType'
import formModal from '../../../components/customModal/formModal.vue'
import relation from '../../relation/common/relation'

/** 下拉刷新标记 */
const bottomFresh = ref<boolean>(false)

/** 请求分页信息 */
const pageInfo = reactive<{
  offset: number
  limit: number
  filter: string
}>({
  offset: 0,
  limit: 20,
  filter: ''
})

/** 当前操作的 单位 / 用户 信息 */
const companyUserInfo = ref<ICompany | IPerson | undefined>(undefined)

/** 人员信息 */
const members = ref<schema.XTarget[]>([])

const data = reactive<any>({
  listInfo: [],
  memberLength: 0,
  itemType: '',
  title: '',
  tabActive: 'members',
  isLoading: true
})
let show = ref<boolean>(false)
let menuInfo = ref<InfoPortal>()

onLoad(async query => {
  if (query && query.item) {
    let item = JSON.parse(query.item)
    data.itemType = item.itemType
    data.title = item.title + '的' + item.label
    memberTypeList[0].title = item.label
    if (item.itemType === '个人') {
      companyUserInfo.value = orgCtrl.user
    } else if (item.itemType === '单位') {
      const curCompany = orgCtrl.user.companys.find(
        i => i.directory.key === item.key
      )
      if (curCompany) {
        companyUserInfo.value = curCompany
      }
    }
    loadMembers()
  }
})

const menuClick = () => {
  menuInfo.value = relation.getSingleMode()
  openModal()
}
/** 打开弹窗 */
const openModal = () => {
  show.value = true
}

const close = () => {
  show.value = false
}

async function getMenuList(obj: any) {
  uni.showLoading({
    title: '加载中...'
  })
  let arr: {
    label: any
    itemType: any
    icon: any
    remark: any
    isShow: boolean
    key: any
    code: any
    createTime: any
    updateTime: any
  }[] = []
  obj.children.forEach(element => {
    let icon: any = null
    try {
      icon = JSON.parse(element.icon)
    } catch {
      icon = ''
    }
    let obj = {
      label: element.name,
      itemType: element.typeName,
      icon: icon.thumbnail,
      remark: element.remark,
      isShow: false,
      key: element.key,
      code: element.code,
      createTime: element.createTime,
      updateTime: element.updateTime
    }
    arr.push(obj)
  })
  data.listInfo = arr
  setTimeout(() => {
    uni.hideLoading()
    data.isLoading = false
  }, 500)
}

function tabChanged(key: string) {
  data.tabActive = key
}

async function goMenu(item: {
  label: any
  type: any
  mainKey: any
  itemType: any
  code: any
  createTime: any
  updateTime: any
  remark: any
}) {
  const params = {
    name: item.label,
    typeName: item.itemType,
    code: item.code,
    createTime: item.createTime,
    updateTime: item.updateTime,
    remark: item.remark
  }
  // if(type === 'menuDetail'){
  uni.navigateTo({
    url: '/pages/relation-pages/menuDetail?item=' + JSON.stringify(params)
  })
  // }
}

/** 加载成员 */
async function loadMembers() {
  if (companyUserInfo.value) {
    const res = await kernel.querySubTargetById({
      id: companyUserInfo.value.id,
      subTypeNames: companyUserInfo.value.memberTypes,
      page: pageInfo
    })
    if (res.success) {
      let result = {
        key: companyUserInfo.value.directory.key,
        item: companyUserInfo.value.directory,
        label: companyUserInfo.value.name,
        itemType: companyUserInfo.value.directory.typeName,
        tag: [companyUserInfo.value.typeName],
        icon: '',
        remark: companyUserInfo.value.remark,
        children: [...members.value, ...(res.data.result || [])],
        beforeLoad: async () => {
          await companyUserInfo.value?.loadContent()
        }
      }
      if (res.data.result) {
        pageInfo.offset = pageInfo.offset += pageInfo.limit
        members.value = [...members.value, ...(res.data.result || [])]
        getMenuList(result)
      } else {
        uni.showToast({
          title: '没有更多啦',
          icon: 'none'
        })
      }
    }
  }
}

/** 下拉刷新 */
function refreshBottom() {
  bottomFresh.value = true
  loadMembers().then(() => {
    bottomFresh.value = false
  })
}
</script>

<style lang="scss">
@import '../../../common/style/global.scss';
.from-content {
  height: calc(100vh - 10px);
  overflow-y: scroll;
}
.to-bottom {
  padding: 0px 10px;
  background-color: #fff;
  height: 100px;
  display: flex;
  align-items: center;
}
.mr16 {
  margin-right: 16px;
}
.flex1 {
  flex: 1;
}
</style>
